<script lang='ts' setup>
	import {
		theme
	} from '@/store/module/theme'
	import {
		ref,
		onBeforeMount
	} from 'vue'


	const list = ref([]);

	onBeforeMount(() => {
		for (let i = 0; i < 20; i++) {
			list.value.push({
				id: i,
				name: "小泡芙" + i,
				head_img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F3ea167ef-8f98-401d-b1e1-173e4d2e06cf%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1708069477&t=f4131edd96910c01bc27b5772e1949b3',
				create: 'linhan',
				content: "日常我们会设置背景颜色，输入一些文字，如果我们想要它们变得酷炫一点那么就可以将单色背景变成渐变，让文字具备阴影，让其立体起来。具体效果我们可以利用CSS属性来实现。今天我们就来了解一下颜色渐变跟阴影是如何设置的" +
					i,
				createTime: '2024-01-18 12:36:58',
				background: [
					'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F3ea167ef-8f98-401d-b1e1-173e4d2e06cf%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1708069477&t=f4131edd96910c01bc27b5772e1949b3',
					'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F3ea167ef-8f98-401d-b1e1-173e4d2e06cf%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1708069477&t=f4131edd96910c01bc27b5772e1949b3',
					'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F3ea167ef-8f98-401d-b1e1-173e4d2e06cf%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1708069477&t=f4131edd96910c01bc27b5772e1949b3',
					'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F3ea167ef-8f98-401d-b1e1-173e4d2e06cf%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1708069477&t=f4131edd96910c01bc27b5772e1949b3'
				]
			});
		}
	});
</script>


<template>
	<view :class="theme()" class="w-full min-h-[100vh]" :style="{background:'var(--Gradient-color)'}">
		<view class="p-[20rpx] bg-[transparent]">
			<!-- follow -->
			<view class="w-full h-[auto]" v-for="i in list" :key="i.id">
				<!-- header -->
				<view class="flex justify-between items-center h-[140rpx]">
					<view class="flex h-full items-center ">
						<view class="w-[90rpx] h-[90rpx] rounded-full overflow-hidden">
							<image :src="i.head_img" mode="" class="w-full h-full"></image>
						</view>
						<view class="ml-[20rpx]">
							<view class="text-[14px] font-bold text-[var(--text-color)]">
								{{i.name}}
							</view>
							<view class="text-[12px]">
								{{i.createTime}}
							</view>
						</view>
					</view>
				</view>
				<!-- content -->
				<view class="text-[14px] pl-[110rpx] pr-[50rpx]">
					<u-read-more showHeight="90" textIndent="0" toggle closeText="展开" :shadowStyle="{
						backgroundImage:'none'
					}">
						<rich-text :nodes="i.content" class=" text-[var(--text-color)]"></rich-text>
					</u-read-more>
					<u-album :urls="i.background"></u-album>
				</view>
			</view>
		</view>

	</view>
</template>